<!--
 * @Author: 1453937336@qq.com 1453937336@qq.com
 * @Date: 2024-04-22 10:06:47
 * @LastEditors: 1453937336@qq.com 1453937336@qq.com
 * @LastEditTime: 2024-06-12 12:23:00
 * @FilePath: \itforce-hris\src\components\theme\theme.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="theme-container">
    <a-modal v-model:open="open" :title="$t('选择项目主题色')" @cancel="hideModal" :footer="null">
      <div class="color-pick-section">
        <el-button
          v-for="(item, index) in themeArr"
          :key="index"
          :style="{ color: item.color, backgroundColor: item.bgColor }"
          @click="themeItemHandler(index)"
          class="color-item"
          :class="activeValue === index ? 'active' : ''"
        >
          {{ item.title }}
        </el-button>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, ref } from "vue";
const store = useStore();

const open = ref(false)
const themeArr = reactive([
  {
    title: "theme1",
    color: "#fff",
    bgColor: "#304156",
  },
  {
    title: "theme2",
    color: "#fff",
    bgColor: "#409eff",
  },
  // {
  //   title: "主题3",
  //   color: "#f7b765",
  //   bgColor: "#a16bfe",
  // },
  // {
  //   title: "主题4",
  //   color: "#9dfcf4",
  //   bgColor: "#121317",
  // }
]);
const activeValue = ref(0)
const themeItemHandler = (index: number) => {
  // window.document.documentElement.setAttribute(
  //   "current-theme",
  //   `theme${index + 1}`
  // );
  activeValue.value = index
  console.log('dddd', activeValue.value);
  const theme = `theme${index + 1}`
  store.commit('USER_THEME', theme)
};
const showModal = () => {
  console.log('dddd');
  
  open.value = true
}
const hideModal = () => {
  open.value = false
}
defineExpose({
  showModal
});
</script>

<style scoped lang="scss">
.color-pick-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 5%;
  height: 200px;
  .color-item {
    color: #fff;
    margin: 0 10px;
    padding: 0;
    width: 120px;
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    &:first-child {
      margin-left: 0px;
    }
  }
}

.active {
  border: 1px solid red;
}
</style>
